<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>博客列表</title>
    <link rel="stylesheet" href="./css/common.css" />
  </head>

  <body>
    <!-- 导航栏 -->
    <div class="nav">
      <!-- logo -->
      <img src="./images/logo_003.jpg" alt="" />
      <div class="content">
        <span>我的博客系统</span>
        <div class="opts">
          <a href="./blog_list.html">主页</a>
          <a href="./blog_eidt.html">写博客</a>
          <a href="./blog_login.html">注销</a>
        </div>
      </div>
    </div>
    <!-- 正文部分 -->
    <div class="container">
      <!-- 左边区域 -->
      <div class="container-left">
        <div class="card">
          <img src="./images/nz1.jpeg" alt="" />
          <h3>小比特</h3>
          <a href="#">Github</a>
          <div class="counter">
            <span>文章</span>
            <span>分类</span>
          </div>
          <div class="counter">
            <span>2</span>
            <span>1</span>
          </div>
        </div>
      </div>
      <!-- 右边区域 -->
      <div class="container-right">
        <!-- 博客正文 -->
        <div class="blog-content">
          <div class="blog-title">这是我的第一篇博客</div>
          <div class="blog-datetime">2023-03-18 10:50:06</div>
          <div class="content">
            <p>
              这是我的第一篇博客内容Lorem ipsum dolor sit amet, consectetur
              adipisicing elit. Qui temporibus a incidunt totam, tempora iste
              facere iusto aliquid odit voluptatum veniam optio dolorum, harum
              fugit praesentium quo esse exercitationem delectus?
            </p>
            <p>
              这是我的第一篇博客内容Lorem ipsum dolor sit amet, consectetur
              adipisicing elit. Qui temporibus a incidunt totam, tempora iste
              facere iusto aliquid odit voluptatum veniam optio dolorum, harum
              fugit praesentium quo esse exercitationem delectus?
            </p>
          </div>
          <div class="aEl">
            <a href="./blog_details.html">查看全文 &gt;&gt; </a>
          </div>
          <hr />
        </div>
        <!-- 以上 博客正文 结束 -->
        <!-- 博客正文 -->
        <div class="blog-content">
          <div class="blog-title">这是我的第一篇博客</div>
          <div class="blog-datetime">2023-03-18 10:50:06</div>
          <div class="content">
            <p>
              这是我的第一篇博客内容Lorem ipsum dolor sit amet, consectetur
              adipisicing elit. Qui temporibus a incidunt totam, tempora iste
              facere iusto aliquid odit voluptatum veniam optio dolorum, harum
              fugit praesentium quo esse exercitationem delectus?
            </p>
            <p>
              这是我的第一篇博客内容Lorem ipsum dolor sit amet, consectetur
              adipisicing elit. Qui temporibus a incidunt totam, tempora iste
              facere iusto aliquid odit voluptatum veniam optio dolorum, harum
              fugit praesentium quo esse exercitationem delectus?
            </p>
          </div>
          <div class="aEl">
            <a href="./blog_details.html">查看全文 &gt;&gt; </a>
          </div>
          <hr />
        </div>
        <!-- 以上 博客正文 结束 -->
        <!-- 博客正文 -->
        <div class="blog-content">
          <div class="blog-title">这是我的第一篇博客</div>
          <div class="blog-datetime">2023-03-18 10:50:06</div>
          <div class="content">
            <p>
              这是我的第一篇博客内容Lorem ipsum dolor sit amet, consectetur
              adipisicing elit. Qui temporibus a incidunt totam, tempora iste
              facere iusto aliquid odit voluptatum veniam optio dolorum, harum
              fugit praesentium quo esse exercitationem delectus?
            </p>
            <p>
              这是我的第一篇博客内容Lorem ipsum dolor sit amet, consectetur
              adipisicing elit. Qui temporibus a incidunt totam, tempora iste
              facere iusto aliquid odit voluptatum veniam optio dolorum, harum
              fugit praesentium quo esse exercitationem delectus?
            </p>
          </div>
          <div class="aEl">
            <a href="#">查看全文 &gt;&gt; </a>
          </div>
          <hr />
        </div>
        <!-- 以上 博客正文 结束 -->
        <!-- 博客正文 -->
        <div class="blog-content">
          <div class="blog-title">这是我的第一篇博客</div>
          <div class="blog-datetime">2023-03-18 10:50:06</div>
          <div class="content">
            <p>
              这是我的第一篇博客内容Lorem ipsum dolor sit amet, consectetur
              adipisicing elit. Qui temporibus a incidunt totam, tempora iste
              facere iusto aliquid odit voluptatum veniam optio dolorum, harum
              fugit praesentium quo esse exercitationem delectus?
            </p>
            <p>
              这是我的第一篇博客内容Lorem ipsum dolor sit amet, consectetur
              adipisicing elit. Qui temporibus a incidunt totam, tempora iste
              facere iusto aliquid odit voluptatum veniam optio dolorum, harum
              fugit praesentium quo esse exercitationem delectus?
            </p>
          </div>
          <div class="aEl">
            <a href="#">查看全文 &gt;&gt; </a>
          </div>
          <hr />
        </div>
        <!-- 以上 博客正文 结束 -->
        <!-- 博客正文 -->
        <div class="blog-content">
          <div class="blog-title">这是我的第一篇博客</div>
          <div class="blog-datetime">2023-03-18 10:50:06</div>
          <div class="content">
            <p>
              这是我的第一篇博客内容Lorem ipsum dolor sit amet, consectetur
              adipisicing elit. Qui temporibus a incidunt totam, tempora iste
              facere iusto aliquid odit voluptatum veniam optio dolorum, harum
              fugit praesentium quo esse exercitationem delectus?
            </p>
            <p>
              这是我的第一篇博客内容Lorem ipsum dolor sit amet, consectetur
              adipisicing elit. Qui temporibus a incidunt totam, tempora iste
              facere iusto aliquid odit voluptatum veniam optio dolorum, harum
              fugit praesentium quo esse exercitationem delectus?
            </p>
          </div>
          <div class="aEl">
            <a href="./blog_details.html">查看全文 &gt;&gt; </a>
          </div>
          <hr />
        </div>
        <!-- 以上 博客正文 结束 -->
      </div>
    </div>
  </body>
</html>
